<template>
  <div>
    <el-container>
      <el-header style="display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #e4e7ed;">
        <span>
          <el-button type="primary"
                     icon="el-icon-edit"
                     size="small"></el-button>
          <span class="title">充电卡管理</span>
        </span>
        <div>
          <el-input placeholder="请输入关键字搜索"
                    v-model="searchKey"
                    style="width: 250px; margin-right: 10px;"></el-input>
          <el-button type="primary"
                     icon="el-icon-search">高级搜索</el-button>
          <el-button type="primary"
                     icon="el-icon-plus"
                     @click="addTask">新增</el-button>
          <el-button type="info"
                     icon="el-icon-edit">编辑</el-button>
          <el-button type="success"
                     icon="el-icon-upload">提交</el-button>
          <el-button type="success"
                     icon="el-icon-check">处理</el-button>
          <el-button type="danger"
                     icon="el-icon-delete">删除</el-button>
        </div>
      </el-header>
      <el-main>
        <el-table :data="processedContentList"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           width="60"></el-table-column>
          <el-table-column fixed
                           prop="index"
                           label="序号"
                           width="80"></el-table-column>
          <el-table-column prop="cardNum"
                           label="充电卡编号"
                           width="180"></el-table-column>
          <el-table-column prop="clientName"
                           label="归属客户"
                           width="120"></el-table-column>
          <el-table-column prop="idCard"
                           label="身份证号"
                           width="200"></el-table-column>
          <el-table-column prop="membershipLevelValue"
                           label="会员等级"
                           width="200"></el-table-column>
          <el-table-column prop="phone"
                           label="联系电话"
                           width="150"></el-table-column>
          <el-table-column prop="createdTime"
                           label="开卡时间"
                           width="160"></el-table-column>
          <el-table-column prop="amount"
                           label="账户金额"
                           width="120"></el-table-column>
          <el-table-column prop="cardCondition"
                           label="卡状态"
                           width="100"
                           :formatter="formatStatus"></el-table-column>
          <el-table-column fixed="right"
                           label="操作"
                           width="230">
            <template slot-scope="scope">
              <el-button @click="viewTask(scope.row)"
                         type="text"
                         size="small">查看</el-button>
              <el-button @click="editTask(scope.row)"
                         type="text"
                         size="small">编辑</el-button>
              <el-button @click="submitTask(scope.row)"
                         type="text"
                         size="small">激活</el-button>
              <el-button @click="handleTask(scope.row)"
                         type="text"
                         size="small">充值</el-button>
              <el-button @click="returnTask(scope.row)"
                         type="text"
                         size="small">禁用</el-button>
              <el-button @click="deleteTask(scope.row)"
                         type="text"
                         size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        searchKey: '',
        contentList: [
          {
            id: 1,
            cardNum: 'CARD202300001',
            clientName: '张三',
            membershipLevelValue: '黄金会员',
            idCard: '310************012',
            phone: '13800138000',
            amount: 500.00,
            createdTime: '2023-11-12 08:30:00',
            cardCondition: 3
          },
          {
            id: 2,
            cardNum: 'CARD202300002',
            clientName: '李四',
            membershipLevelValue: '白银会员',
            idCard: '320************345',
            phone: '13900139000',
            amount: 300.00,
            createdTime: '2023-11-13 09:15:00',
            cardCondition: 2
          },
          {
            id: 3,
            cardNum: 'CARD202300003',
            clientName: '王五',
            membershipLevelValue: '钻石会员',
            idCard: '330************678',
            phone: '13700137000',
            amount: 1000.00,
            createdTime: '2023-11-14 10:20:00',
            cardCondition: 3
          },
          {
            id: 4,
            cardNum: 'CARD202300004',
            clientName: '赵六',
            membershipLevelValue: '普通会员',
            idCard: '340************901',
            phone: '13600136000',
            amount: 100.00,
            createdTime: '2023-11-15 14:45:00',
            cardCondition: 1
          },
          {
            id: 5,
            cardNum: 'CARD202300005',
            clientName: '钱七',
            membershipLevelValue: '黄金会员',
            idCard: '350************234',
            phone: '13500135000',
            amount: 600.00,
            createdTime: '2023-11-16 16:30:00',
            cardCondition: 3
          }
        ]
      };
    },
    computed: {
      processedContentList () {
        return this.contentList.map((item, index) => {
          return {
            ...item,
            index: index + 1  // 前端自增序号
          }
        })
      }
    },
    methods: {
      handleSelectionChange () { },
      formatStatus (row, column) {
        const statusMap = {
          1: { text: '禁用', color: 'red' },
          2: { text: '登记', color: 'orange' },
          3: { text: '已激活', color: 'green' }
        }
        const status = statusMap[row.cardCondition]
        return <span style={`color: ${status.color};`}>{status.text}</span>
      },
      viewTask (row) {
        console.log('查看任务详情', row);
        this.$router.push('/hostDisplayDetail')
      },
      editTask (row) {
        console.log('编辑任务', row);
      },
      submitTask (row) {
        console.log('提交任务', row);
      },
      handleTask (row) {
        console.log('处理任务', row);
      },
      returnTask (row) {
        console.log('退回任务', row);
      },
      deleteTask (row) {
        console.log('删除任务', row);
      },
      addTask (row) {
        console.log('新增任务', row);
        this.$router.push('/hostDisplayAdd')
      }
    }
  };
</script>

<style scoped>
  .title {
    font-size: 20px;
    font-weight: bold;
  }
  /* 设置表格内文字自动换行 */
  .el-table {
    white-space: nowrap; /* 取消自动换行 */
    font-size: 14px; /* 把表格内字体改小，可根据实际情况调整 */
  }
  div {
    background-color: rgb(255, 255, 255);
  }
</style>